<script type="text/javascript" src="__PUBLIC__/Js/jquery.switchable-2.0.min.js"></script>
<style>
.slide-panel {position:relative;width:{$flashwidth}px;height:{$flashheight}px;overflow:hidden;}
.slide-panel li {float:left;}
.slide-panel li img {display:block;width:{$flashwidth}px;height:{$flashheight}px;}
.switchable-triggers { position:absolute; right:3px; bottom:6px; }
.switchable-triggers li {display:inline-block;border:1px solid #333;float:left;width:16px;height:16px;margin:0 3px;background:#454545;;color:#FFF;font-size:13px;
    line-height:16px; text-align:center; cursor:pointer; }
.switchable-triggers li.current {border:1px solid #BF0000;background:#EF0000;color:#fff;}
</style>
<div class="slide1">
	<div id="slide_{$flashid}" class="slide-panel"><ul>
		{loop}
		 <li><a href="{$r.link}" target="_blank"><img src="{$r['pic']}" alt="{$r['title']}"></a> </li>
		{/loop}
	</ul></div>
</div> 
<script>
jQuery(document).ready(function($){
   var slide = $('#slide_{$flashid}').switchable({
    putTriggers: 'appendTo',
    panels: 'li',
    initIndex: -1,
    effect: 'scrollRight',
    easing: 'cubic-bezier(.455, .03, .515, .955)',
    end2end: true,
    loop: false, 
    autoplay: true,
    interval: 5,
    api: true
  }).play();
});
</script>